<template>
  <!-- 附近好店 -->
  <div class="goodShop">
    <!-- 头部 -->
    <div class="top">
      <div class="top_item">
        <img src="../../assets/images/2@2x.png" alt />
        <span>附近好店</span>
        <img src="../../assets/images/1@2x.png" alt />
      </div>
    </div>
    <!-- 标题 -->
    <div class="title">
      <ul>
        <li
          v-for="(item,index) in industry"
          :key="index"
          @click="hanldeClidk(index,item.id)"
          :class="{actitve:currentIndex===index}"
        >
          {{item.name}}
          <a v-if="currentIndex===index"></a>
        </li>
      </ul>
    </div>
    <!-- 商店 -->
    <div class="shops">
      <div class="shop_item" v-for="(item,index) in shopList" :key="index" >
        <div class="left">
          <img
            :src="item.shop_pic"
            alt
          />
          <div class="shop_msg">
            <span>{{item.shop_name}}</span>
           
            <el-rate
              v-model="value5"
              show-score
              disabled
              :colors="color"
              text-color="#848484"
              :show-text="false"
                score-template="{value}"
            ></el-rate>
            <p>{{item.industry}}</p>
            <span v-for="(child,j) in item.shop_label" :key="j">{{child}}</span>
            <!-- <span>50减10</span> -->
          </div>
        </div>
        <div class="right">
            <p>0.3km</p>
            <span>进店</span>
        </div>
      </div>
      <div v-if="shopList.length==0"><img src="https://i.loli.net/2019/11/07/J3HA2y1uROoVQbl.png" alt=""></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    industry: {
      type: Array,
      default() {
        return [];
      }
    },
    shopList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      currentIndex: 0,
      title: [{ name: "推荐", id: 999 }],
        value5: 5,
        color:['#ff6633', '#ff6633', '#ff6633']
    };
  },
  methods: {
    hanldeClidk(v,id) {
      this.currentIndex = v;
      this.$emit('chanageMsg',id)
    },
   
  }
};
</script>
<style lang="less" scoped>
.goodShop {
  border-top: .1rem solid #efeff2;
  border-bottom: .2rem solid #efeff2;
  .top {
    .top_item {
      font-size: 0.2rem;
      font-weight: 500;
      color: #ff6633;
      img {
        width: calc(89 / 2 * 0.01rem);
        height: calc(18 / 2 * 0.01rem);
        vertical-align: middle;
      }
      span {
        display: inline-block;
        padding: 0.15rem 0.1rem;
      }
    }
  }
  .title {
    padding-bottom: 10px;
    border-bottom: 0.01rem solid #ccc;
    ul {
      display: flex;
      list-style: none;
      justify-content: space-evenly;
      li {
        a {
          display: block;
          background-color: #ffbd00;
          height: 0.03rem;
          margin: 0 .03rem;
          border: 1px solid #ffbd00;
          border-radius: 30%;
        }
      }
    }
  }
  .shops {
    .shop_item {
      display: flex;
      border-bottom: .01rem solid #ccc;
      // justify-content: space-between;
      text-align: left;
      padding: .15rem;
      .left {
        flex: 2;
        display: flex;

        img {
          width: 1.10rem;
          height: 1.10rem;
          border-radius: .10rem;
        }
        .shop_msg{
            padding-left: .10rem;
            :first-child{
                color: #000;
                border: none;
                font-weight: 500;
                font-size: .18rem;
            }
            p:nth-child(3){
                font-size: .16rem;
                padding: .15rem 0;
                color: #808080;
            }
            // span:nth-child(4){
            //     font-size: 14px;
            //     border: 1px solid #ff794c;
            //     padding: 3px;
            //     border-radius: 5px;
            //     color: #ff794c;
            // }
            span{
                font-size: .14rem;
                margin-right: .05rem;
                border: 1px solid #ff794c;
                color: #ff794c;
                border-radius: .05rem;
                padding: .03rem;
            }
        }
      }
      .right{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-content:space-between;
          :first-child{
              font-size: .14rem;
              color:#999999;
              text-align: right;
              padding-top: .15rem;
          }
          :last-child{
              color: #fff;
              background-color: #ffd000;
              font-size: .16rem;
              padding: .03rem .20rem;
              border-radius: .40rem;
          }
      }
    }
  }
}
.actitve {
  font-weight: 600;
}
/deep/.el-icon-star-on{
    font-size: .14rem !important;
    margin-right: .01rem;
}
/deep/.el-rate__icon{
    margin-right:.01rem;
}
// /deep/.el-rate:last-child .el-icon-star-on{
//     margin-right: 1px;
// }
</style>